<template>
    <div>
        <h3>路由的安装</h3>
        <pre>
        1、自动化安装
            A) 在创建项目时 vue create 项目名称通过选择路由功能自动添加
            B） vue/cli 3.0 版本中对以创建的项目，通过下述方式进行自动添加
                - 方式1、通过命令 vue add router 进行插件安装的同时配置路由功能
                - 方式2、启动 GUI 页面 vue ui 通过添加路由按钮进行自动换添加
            ! 通过GUI或者add命令集成路由时，会完成如下操作需要注意
                - src下创建 router/index.js 文件
                - src下创建 views/Home.vue  views/About.vue
                - 修改 main.js 增加配置
                - 覆盖 App.vue 文件
        </pre>
        <hr>
        <pre>
        2、手动安装路由
            step1)  路由功能依赖于模块 vue-router 
                    首先安装路由插件 npm install vue-router -S
            step2)  配置项目路由功能
                    1. 在当前项目的src 目录下创建 router/index.js 文件,并添加配置
                    <code>
                        // 1、相关的模块加载
                        //   a、Vue 构造函数的加载
                        import Vue from 'vue'
                        //   b、路由模块，路由模块返回的是一个 路由构造函数
                        import Router from 'vue-router';
                        //   为项目安装 路由功能
                        //         + 全局混入具有路由配置解析的 beforeCreate 生命周期
                        Vue.use(Router)
                        // 2、基于路由构造函数创建路由实例对象
                        const router = new Router({
                            routes:[]
                        });
                        // 3、将路由实例对象进行导出
                        export default router;
                    </code>
            step3)  在main.js 文件中导入并装载路由功能
                    <code>
                    import Vue from 'vue'
                    import router from './router'
                    import App from './App.vue'
                    new Vue({
                        router:router,
                        render: h => h(App),
                    }).$mount('#root')
                    </code>

        </pre>
    </div>
</template>